/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Form, Tabs, DatePicker, Input, Select, Table, Divider, Row, Col, Card, Statistic} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../../components/ViewTitle";
import {FormField, SearchForm} from "antd-extra";
import styles from "../../index.less";

const {RangePicker} = DatePicker;

const {TabPane} = Tabs;
moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,dict,
            store, procureOrder
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...procureOrder,...dict, ...store}))
export default class ModalCustomerDetail extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {values, dispatch} = this.props;
    const data = this.props.form.getFieldsValue();
    dispatch &&   dispatch({
      type: 'dict/findMany',
      payload: {type: 'division'}
    });
    dispatch && dispatch({
      type: 'global/getModel',
      payload: {table: 'Customer'}
    });
    const {code} = values;
    this.props.dispatch({
      type: 'customer/findDetail',
      payload: {code, ...data}
    }).then(res => {
      console.log(res);
      this.setState({...res.result});
    });
  }


  cols = () => {
    return [
      {title: "收入来源", key: "origin", dataIndex: "origin"},
      {title: "收入事由", key: "receiptMatter", dataIndex: "receiptMatter"},
      {title: "收入金额", key: "receiptAmount", dataIndex: "receiptAmount"},
      {title: "收入业务员", key: "receiptSalesman", dataIndex: "receiptSalesman"},
      {title: "收款方式", key: "receiptWay", dataIndex: "receiptWay"},
      {
        title: "日期", key: "createdTs", dataIndex: "createdTs", render: (text, record) => {
          return <div>{moment(text).format('YYYY-MM-DD')}</div>;
        }
      }
    ];
  };

  getCard(list) {
    return _.map(list, (item) => {
      const {title, value} = item;
      let color='#0f0';
       color=value>0?'#35f': color;
       color=value<0?'#f00': color;
      return <Col span={8}>
        <Card
          onClick={() => {

          }}
        >
          <Statistic
            title={title}
            value={value}
            precision={3}
            valueStyle={{color}}
          />

        </Card>
      </Col>;
    });
  }

  render() {
    const {form, style,divisionDict} = this.props;
    const {list, receiptAmount = 0, salesAmount = 0, publicFee=0,invoiceAmount = 0,payLaborFee=0,payPublicFee=0, outboundAmount = 0,laborFee=0} = this.state;
    const array = [
      {title: '当期合同额', value: salesAmount},
      {title: '收入', value: receiptAmount},
      {title: '合同未收', value: (salesAmount-receiptAmount)},
      {title: '开票额', value: invoiceAmount},
      {title: '收入', value: receiptAmount},
      {title: '开票未收', value: (invoiceAmount-receiptAmount)},
      {title: '出货商品金额', value: outboundAmount},
      {title: '收入', value: receiptAmount},
      {title: '出货未收', value: (outboundAmount-receiptAmount)},
      {title: '劳务费用', value: laborFee},
      {title: '劳务费已付', value: payLaborFee},
      {title: '劳务费待付', value: (laborFee-payLaborFee)},
      {title: '公关费用', value: publicFee},
      {title: '公关费已付', value: payPublicFee},
      {title: '公关费待付', value: (publicFee-payPublicFee)},
    ];
    return (
      <div style={{...style}}>
        {/*{values.name + " 当期合同额：" + salesAmount + "元，收入：" + receiptAmount + "元，开票：" + invoiceAmount + "元，出货：" + outboundAmount + "元"}*/}

        <SearchForm
          style={{marginLeft: '6px', marginRight: '6px'}}
          onSearch={() => {
            this.state.current = 1;
            this.componentDidMount();
          }}
          onReset={this.handleReset}
          cols={3}
          min={6}
          expandText="展开"
          form={form}
        >
          {[
            <FormField
              label="统计时间"
              name="createdTs"
              key={3}
              initialValue={[this.getSearchStart1Year(), this.getDefaultSearchEndDate()]}
            >
              <RangePicker allowClear={true}
                // style={{ width: '150%' }}
              />
            </FormField>,
            <FormField
              label="采购公司"
              name="division"
              key={1}

            >
              <Select allowClear placeholder="请选择" style={{width: '100%'}}
                      onChange={value => {
                        this.state.division = value;
                      }}
              >
                {this.getDivision(divisionDict)}
              </Select>
            </FormField>

          ]}
        </SearchForm>
        <Tabs defaultActiveKey="1">
          <TabPane tab="统计" key="1">
            <Row gutter={24} >
              {this.getCard(array)}
            </Row>

          </TabPane>
          <TabPane tab="收入" key="2">
            <ViewTitle
              title={'收入记录'}
            ></ViewTitle>

            <Table
              className={styles.antTable}
              bordered={true}
              columns={this.cols()}
              dataSource={list}
              scroll={{x: true}}
              pagination={true}
              //scroll={{ x: 1300 }}
            ></Table>
          </TabPane>
        </Tabs>

      </div>

    );
  }
}

